import Taro, { Component } from "@tarojs/taro";
import {
  AtButton,
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction
} from "taro-ui";
import { View } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import { onLoginSession, onGetUserInfo } from "../../actions/user";

@connect(
  state => state.user,
  {
    onLoginSession,
    onGetUserInfo
  }
)
class LoginModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
  }
  onGetUserInfo = userInfo => {
    this.props.onGetUserInfo(userInfo.detail);
    this.props.onLoginSession();
  };
  render() {
    return (
      <View className='login-modal'>
        <AtModal isOpened={this.state.show} closeOnClickOverlay={false}>
          <AtModalHeader>获取用户信息</AtModalHeader>
          <AtModalContent>
            {`我们需要获取您的信息，
            用于存储您的数据。
            否则，将导致功能不可用`}
          </AtModalContent>
          <AtModalAction className='login-modal-action'>
            <AtButton
              className='login-modal-button'
              onClick={() => {
                this.setState({
                  show: false
                });
              }}
            >
              取消
            </AtButton>
            <AtButton
              className='login-modal-button'
              type='primary'
              lang='zh_CN'
              openType='getUserInfo'
              onGetUserInfo={this.onGetUserInfo}
            >
              确定
            </AtButton>
          </AtModalAction>
        </AtModal>
      </View>
    );
  }
}
export default LoginModal;
